<template>
    <div class="header-container">
        <div class="left-container">
            <img src="../../../../img/title.jpg" alt="">
            <p>网易云音乐</p>
        </div>
        <router-link to="/">
            <div class="app">
                下载APP
            </div>
        </router-link>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="scss" scoped>
@import './src/common/scss/mixin.scss';
    .header-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 240px;
        background: #d43c33;
        line-height: 2.25rem;
        padding: 0 .5rem 0 .5rem;
        box-sizing: border-box;
        @include display-r;
        justify-content: space-between;
        align-items: center;
        .left-container {
            @include display-r;
            align-items: center;
                img {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                }
                p {
                    font-size: 50px;
                    color: #fff;
                    margin-left: 20px;
                }
        }
        a {
            text-decoration: none;
                .app {
                    height: 100px;
                    line-height: 98px;
                    font-size: 42px;
                    width: 270px;
                    text-align: center;
                    color: #d43c33;
                    background-color: #fff;
                    border-radius: 37.5%/100%;
                }
        }
    }
</style>